<template>
  <div>
    <a-select
      :mode="'multiple'"
      style="width: 100%"
      placeholder="请选择岗位"
      v-model="showSelect"
      :disabled="disabled"
      ref="selectModel"
      @dropdownVisibleChange="visibleModel"
    >
    </a-select>
    <position-multi-select-modal
      v-if="transferShow"
      ref="transferModal"
      v-model="initPositions"
      :current-positions="initPositions"
      @selectFinish="selectFinish"></position-multi-select-modal>
  </div>
</template>

<script>
import {getAction} from '@/api/manage'
import PositionMultiSelectModal from '@views/erp/org/position/components/PositionMultiSelectModal';

export default {
  name: 'PositionMultiSelect',
  components: {PositionMultiSelectModal},
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    value: {
      type: String,
        required: false
      },
      props: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        transferShow: true,
        ids: [],
        selectedObj: [],
        list: [],
        showSelect: [],
        objs: '',
        initPositions: [],
        url: {
          queryById: '/api/erpmng/sys/position/queryById',
          queryByIds: '/api/erpmng/sys/position/queryByIds'
        }
      }
    },
    mounted() {
      console.log('this.value', this.value)
      this.initObj(this.value);
    },
    watch: {
      value(val) {
        this.initObj(val);
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    methods: {
      initObj(ids) {
        this.transferShow = false
        this.selectedObj = [];
        this.objs = []
        this.showSelect = []
        if (ids && ids.length > 0) {
          this.ids = ids.split(',');
          console.log('postionM', this.ids)
          let url = '';
          let param = {};
          if (this.ids.length == 1) {
            url = this.url.queryById;
            param = { id: ids };
          } else {
            url = this.url.queryByIds;
            param = { ids: ids };
          }
          getAction(url, param).then((res) => {
            if (res.success) {
              console.log('res111', res)
              if (!Array.isArray(res.result)) {
                this.selectedObj.push(res.result);
              } else {
                if (res.result.length > 0) {
                  this.initPositions = []
                }
                for (let i = 0; i < res.result.length; i++) {
                  this.selectedObj.push(res.result[i]);
                  this.initPositions.push(res.result[i].id)
                  this.showSelect.push(res.result[i].name)
                }
              }
            }
          });
          this.$nextTick(() => {
            this.transferShow = true
          })
          } else {
          this.ids = [];
          this.initPositions = [];
          this.showSelect = []
          this.$nextTick(() => {
            this.transferShow = true
          })
        }
      },
      visibleModel() {
        this.$refs.transferModal.show(this.ids);
      },
      // 子modal回调
      selectFinish: function (list) {
        this.selectedObj = list;
        console.log('selectedObj', this.selectedObj)
        this.showSelect = []
        this.initPositions = []
        this.ids = [];
        list.forEach((item, key) => {
          this.showSelect.push(item.name)
          this.initPositions.push(item.id)
          this.ids.push(item.id);
        })
        this.objs = []
        this.objs = this.ids.join(',');
        this.$emit('change', this.objs);
        this.$emit('back', this.selectedObj);
      }
    }
  }
</script>

<style scoped>

</style>
